<template>
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import OSM from 'ol/source/OSM'
    import TileLayer from 'ol/layer/Tile'
    import {defaults as defaultControls} from 'ol/control.js';
    import {Zoom, ZoomSlider, ZoomToExtent} from 'ol/control'

    export default {
        name: "ZoomControl",
        data() {
            return {
                map: null
            }
        },
        mounted() {
            this.map = new Map({
                target: "map",
                layers: [
                    new TileLayer({
                        source: new OSM()
                    })
                ],
                controls:defaultControls({
                    zoom:false//禁用缩放控件
                }),

                view: new View({
                    //extent:[],
                    center: [113.24981689453125, 23.126468438108688],
                    projection: "EPSG:4326",
                    zoom: 12
                })
            })

            this.zoomCtl();
            this.zoomSlider();
            this.zoomToExtent()
        },
        methods:{
            zoomCtl:function () {
                let zoom = new Zoom({
                    className: "ol-zoom-custom",//CSS 类名
                    duration:1000,
                    zoomInLabel:'+',//放大的文本标签
                    zoomInTipLabel: "放大",//用于按钮提示的文本标签
                    zoomOutTipLabel: "缩小",//用于按钮提示的文本标签
                    delta: 5,//每次单击时应用的缩放增量
                });
                this.map.addControl(zoom)
            },
            zoomSlider:function () {
                let slider = new ZoomSlider({
                    duration: 1000,//以毫秒为单位的动画持续时间
                    render: this.render(),//应重新呈现控件时调用的函数
                });
                this.map.addControl(slider)
            },
            zoomToExtent:function () {
                let extent = new ZoomToExtent({// 缩放至特定位置控件
                    extent: [
                        813079.7791264898, 5929220.284081122,
                        848966.9639063801, 5936863.986909639
                    ],
                    label:"T",
                    tipLabel:"复位",
                })
                this.map.addControl(extent);
            },
            render() {
                console.log("render")
            },
        }

    }
</script>

<style>
    #map {
        width: 100%;
        height: 100%;
    }

    .ol-viewport .ol-zoom-custom {
        top: .5em;
        right: .5em;
    }
</style>